<template>
	<layout v-else>
		<simple-toolbar :title="$t('contract.contract')">
			<view>
				<el-button @click="navBack">{{ $t('contract.return') }}</el-button>
			</view>
		</simple-toolbar>
	
		<view class="box">
			<view class="item">
				<view class="subItem">
					<text class="key">{{ $t('contract.contract_id') }}：</text>
					<text class="value">{{ detail.contract_id }}</text>
				</view>
				<view class="subItem">
					<text class="key">{{ $t('contract.first_name') }}：</text>
					<text class="value">{{ detail.first_name }}</text>
				</view>
				<view class="subItem">
					<text class="key">{{ $t('contract.account') }}：</text>
					<text class="value">{{ detail.account }}</text>
				</view>
				<view class="subItem">
					<text class="key">{{ $t('contract.fund_date') }}：</text>
					<text class="value">{{ detail.fund_date }}</text>
				</view>
				<view class="subItem">
					<text class="key">{{ $t('contract.fee') }}：</text>
					<text class="value">{{ detail.fee }}</text>
				</view>
				<view class="subItem">
					<text class="key">{{ $t('contract.is_active') }}：</text>
					<text class="value">{{ detail.is_active == true ? 'YES' : 'NO' }}</text>
				</view>
			</view>
			<view class="item">
				<view class="subItem">
					<text class="key">{{ $t('contract.last_name') }}：</text>
					<text class="value">{{ detail.last_name }}</text>
				</view>
				<view class="subItem">
					<text class="key">{{ $t('contract.email') }}：</text>
					<text class="value">{{ detail.email }}</text>
				</view>
				<view class="subItem">
					<text class="key">{{ $t('contract.start_date') }}：</text>
					<text class="value">{{ detail.start_date }}</text>
				</view>
				<view class="subItem">
					<text class="key">{{ $t('contract.current_tib') }}：</text>
					<text class="value">{{ detail.current_tib }}</text>
				</view>
				<view class="subItem">
					<text class="key">{{ $t('contract.total_tib') }}：</text>
					<text class="value">{{ detail.total_tib }}</text>
				</view>
				<view class="subItem">
					<text class="key">{{ $t('contract.expiration') }}：</text>
					<text class="value">{{ detail.expiration }}</text>
				</view>
			</view>
		</view>
	</layout>
</template>

<script>
	export default {
		data() {
			return {
				detail: {}
			}
		},
		onLoad(e) {
			this.detail = JSON.parse(decodeURIComponent(e.detail))
		},
		methods: {
			navBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
.text {
		font-size: 7.81rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 20%;
	}

	.box {
		display: flex;
		justify-content: space-between;
	}

	.item:first-child {
		margin-left: 23.43rpx;
	}

	.item {
		flex: 1;
	}

	.subItem {
		margin-top: 12.5rpx;
		color: #3B3E66;
	}

	.key {
		font-weight: bold;
	}

	.value {
		opacity: 0.5;
	}
</style>
